<template>
    <div>
        <div class="iptWp" v-if="type=='input'">
            <input :class="['ipt',ipt.length==maxlength?'color':'']" type="text" :maxlength="maxlength" v-model="ipt">
            <span class="span">{{ipt.length+'/'+maxlength}}</span>
        </div>
        <div class="iptWp" v-else-if="type=='textarea'">
            <textarea :class="['ipt',ipt.length==maxlength?'color':'']" :maxlength="maxlength" v-model="ipt" cols="30" rows="10"></textarea>
            <span class="textSpan">{{ipt.length+'/'+maxlength}}</span>
        </div>
    </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "input"
    },
    maxlength: {
      type: [String, Number],
      default: 10
    }
  },
  data() {
    return {
      ipt: ""
    };
  }
};
</script>

<style scoped>
.color {
  color: red;
}

.iptWp {
  position: relative;
  display: inline-block;
}

.span {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0, -50%);
}

.textSpan {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
</style>